<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">


    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-progress-bar__outer{
            background-color: #909399;
        }
    </style>

</head>
<body>

<div id="app">



    <el-form size="small"  :inline="true"  >
        <el-form-item label="年份："  >
            <el-select   style="'width:180px;'"  v-model="formData['t_year']" >
                <el-option :value="item" v-for="(item,index) in years" :label="item" ></el-option>
            </el-select>
        </el-form-item>


        <el-form-item label="月份："  >
            <el-select   style="'width:180px;'"  v-model="formData['t_method']" >
                <el-option value="all" label="全年" ></el-option>
                <el-option :value="item" v-for="(item,index) in methods" :label="item" ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="startHesuan" >开始核算</el-button>
            <el-button type="primary" @click="deleteFeiyong" >删除费用</el-button>

        </el-form-item>

    </el-form>

    <div v-if="isShow">
        <el-progress :text-inside="true" :stroke-width="26" :show-text="true" :format="formatProgress"  :percentage="percentage"></el-progress>
        <div>{{textPro}}</div>
    </div>



</div>

<script>
    var E = window.wangEditor; // 全局变量
</script>
<script>




    var vm = new Vue({
        el: '#app',
        data: {
            years:[],
            methods:[],
            percentage:0,
            textPro:"",
            parmsData:{},
            isShow :false,
            formData:{"t_year":"","t_method":""}
        },
        created(){
            this.getData();
            this.parmsData = getParams();
            this.getProgress();
        },
        methods:{
            formatProgress(p){
                return p+"%";
            },
            deleteFeiyong(){
                this.$confirm('此操作将删除你所选择的欠费记录、收款记录等, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    top.load();
                    const res = await postWebCustom(getTableId("928"),{"startRq":this.formData.t_year+"-"+this.formData.t_method,id:this.parmsData.id,type:this.parmsData.type});
                    top.layer.closeAll();
                    top.alert(res.msg);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            async startHesuan(){
                this.isShow = true;
                this.textPro = "开始核算...";
                const res = await axios.post("http://127.0.0.1:11280/api/buy",{"meterType":"SH_IC_WATER_METER","param":{"sysCode":1,"userCode":"23793","count":0,"buyValue":1,"type":3}});
                console.log(res.data);

            },
            async getProgress(){
              const res = await postWebCustom(getTableId("687"),{"id":this.parmsData.id});
              if(res.code == 0){
                  this.percentage = 0;
              }else {
                  if(res.data.pro != 0){
                      this.isShow = true;
                  }
                  if(parseInt(res.data.pro)<100){
                      this.getProgress();
                  }
                  this.percentage = res.data.pro;
                  this.textPro = res.data.text;
              }

            },
            async getData(){
                const res = await postWebCustom(getTableId("684"),{});
                this.years = res.data.years;
                this.methods = res.data.methods;
                this.formData["t_year"] = res.data.t_year;
                this.formData["t_method"] = res.data.t_method;
            }
        },

    })


    //验证必填项
    function verification() {
        let a = 0;
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            try {
                vm.submitForm("ruleForm",a);
                a++;
            }catch (e){}
        }
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            for(let key in map){
                try {
                    let value = map[key];
                    if(vm.rules[zygl][key] != undefined && value == ""){
                        top.alert("红*号必输项不能为空!");
                        return false;
                    }
                }catch (e){}
            }

        }
        return true;
    }

    function getData() {
        console.log(vm.formInline)
        return vm.formInline;
    }


    function setData(data) {
        if(Object.keys(data).length > 0){
            vm.formInline = data;
        }

    }
</script>


</body>
</html>
